<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>
      Comic Book Template Maker | Binary Nonsense | Website of Álvaro García
    </title>
    <meta
      name="description"
      content="Online comic book page and thumbnails template maker."
    />
    <meta
      name="keywords"
      content="comic book, comic, page, template, maker, online"
    />
    <meta name="author" content="Álvaro García www.binarynonsense.com" />
    <meta name="copyright" content="Álvaro García www.binarynonsense.com" />
    <!-- <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; img-src 'self' data:"
    /> -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/tree-view.css" />
    <link rel="stylesheet" href="./css/loading.css" />
    <link rel="stylesheet" href="./css/modals.css" />
    <link href="./libs/fontawesome/css/fontawesome.css" rel="stylesheet" />
    <link href="./libs/fontawesome/css/solid.css" rel="stylesheet" />
  </head>
  <body>
    <div id="left">
      <div id="zoom-buttons">
        <div class="zoom-button" id="zoom-button-1" title="zoom in">
          <i class="fa-solid fa-magnifying-glass-plus zoom-button-icon"></i>
        </div>
        <div class="zoom-button" id="zoom-button-2" title="zoom out">
          <i class="fa-solid fa-magnifying-glass-minus zoom-button-icon"></i>
        </div>
        <div class="zoom-button" id="zoom-button-3" title="reset view">
          <i class="fa-solid fa-expand zoom-button-icon"></i>
        </div>
      </div>
      <div id="result-div">
        <img src="" id="result-img" alt="" />
      </div>
    </div>
    <div id="right-bottom">
      <div id="buttons">
        <button id="refresh-button">REFRESH PREVIEW</button>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="autorefresh-checkbox"
            class="refresh"
            checked
          />
          <span id="autorefresh-span">auto-refresh</span>
        </label>
      </div>
    </div>
    <div id="right">
      <div class="tab tab-selected" id="tab-1" title="presets">
        <i class="fa-solid fa-bookmark tab-icon"></i>
      </div>
      <div id="tab-1-content">
        <h3 class="h3-extratop" id="presets-header">Template Presets:</h3>
        <label
          ><span id="presets-load-preset-span">load a preset</span
          ><select id="preset-select" class="refresh"></select
        ></label>
        <div style="display: none" id="presets-load-preset-option-default">
          select a preset
        </div>
        <div class="import-export-buttons">
          <div
            id="open-modal-import-preset-button"
            class="import-export-button"
            title="import preset from file"
          >
            <i class="fa-solid fa-file-arrow-up"></i>
          </div>
          <div
            id="open-modal-export-preset-button"
            class="import-export-button"
            title="export settings to preset file"
          >
            <i class="fa-solid fa-file-arrow-down"></i>
          </div>
        </div>
      </div>
      <!-- dimensions ///////////////////////////////////////////////////// -->
      <div class="tab" id="tab-2" title="dimensions">
        <i class="fa-solid fa-ruler-combined tab-icon"></i>
      </div>
      <div id="tab-2-content" class="hidden">
        <label>
          <span id="dimensions-units-span">units</span
          ><select id="units-select" class="refresh">
            <option id="dimensions-units-option-inches" value="inches">
              inches
            </option>
            <option id="dimensions-units-option-cm" value="cm">
              centimeters
            </option>
          </select></label
        >

        <div id="trim-div" class="section">
          <h3 id="dimensions-trim-area-size-header">Trim Area Size:</h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-trim-area-width-span">width</span
              ><input
                type="number"
                id="trim-width-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="6.625"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-trim-area-height-span">height</span
              ><input
                type="number"
                id="trim-height-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="10.1875"
            /></label>
          </div>
        </div>

        <div id="safe-div" class="section">
          <h3 id="dimensions-safe-area-margin-header">Safe Area Margin:</h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-safe-area-top-span">top</span
              ><input
                type="number"
                id="safe-margin-top-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.25"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-safe-area-bottom-span">bottom</span
              ><input
                type="number"
                id="safe-margin-bottom-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.25"
            /></label>
          </div>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-safe-area-left-span">left</span
              ><input
                type="number"
                id="safe-margin-left-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.25"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-safe-area-right-span">right</span
              ><input
                type="number"
                id="safe-margin-right-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.25"
            /></label>
          </div>
        </div>

        <div id="bleed-div" class="section">
          <h3 id="dimensions-bleed-area-margin-header">Bleed Area Margin:</h3>
          <label
            ><span id="dimensions-bleed-area-span"
              >top / bottom / left / right</span
            ><input
              type="number"
              id="bleed-margin-input"
              class="refresh unit-value"
              step="0.25"
              min="0"
              value="0.125"
          /></label>
        </div>

        <div id="paper-div" class="section">
          <h3 id="dimensions-header-area-margin-header">Header Area Margin:</h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-header-area-topbottom-span"
                >top / bottom</span
              ><input
                type="number"
                id="header-margin-top-bottom-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.5"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-header-area-leftright-span"
                >left / right</span
              ><input
                type="number"
                id="header-margin-left-right-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.5"
            /></label>
          </div>
        </div>

        <div class="section">
          <h3 id="dimensions-lines-header">Lines:</h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-lines-thin-width-span">thin width</span
              ><input
                type="number"
                id="line-width-thin-input"
                class="refresh unit-value"
                step="0.005"
                min="0"
                value="0.004"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-lines-thick-width-span">thick width</span
              ><input
                type="number"
                id="line-width-thick-input"
                class="refresh unit-value"
                step="0.005"
                min="0"
                value="0.008"
            /></label>
          </div>
          <label
            ><span id="dimensions-lines-bordermarks-span"
              >border marks max. length</span
            ><input
              type="number"
              id="border-marks-length-input"
              class="refresh unit-value"
              step="0.005"
              min="0"
              value="0.085"
          /></label>
        </div>

        <div id="panels-div" class="section">
          <h3 id="dimensions-panels-header">Panels:</h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-panels-gutter-size-span">gutter size</span
              ><input
                type="number"
                id="panel-gutter-size-input"
                class="refresh unit-value"
                step="0.05"
                min="0"
                value="0.15"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-panels-line-width-span">line width</span
              ><input
                type="number"
                id="panel-line-width-input"
                class="refresh unit-value"
                step="0.01"
                min="0"
                value="0.025"
            /></label>
          </div>
        </div>

        <div class="section">
          <h3 id="dimensions-header-header">Header Text:</h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-header-text-height-span">text height</span
              ><input
                type="number"
                id="header-text-height-input"
                class="refresh unit-value"
                step="0.05"
                min="0"
                value="0.12"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-header-line-spacing-span">line spacing</span
              ><select id="header-text-spacing-select" class="refresh">
                <option value="1.1">x1.1</option>
                <option value="1.2">x1.2</option>
                <option value="1.3">x1.3</option>
                <option value="1.4">x1.4</option>
                <option value="1.5">x1.5</option>
                <option value="2">x2</option>
              </select></label
            >
          </div>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="dimensions-header-padding-left-span">padding left</span
              ><input
                type="number"
                id="header-padding-left-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.21"
            /></label>
            <label class="two-columns"
              ><span id="dimensions-header-padding-bottom-span"
                >padding bottom</span
              ><input
                type="number"
                id="header-padding-bottom-input"
                class="refresh unit-value"
                step="0.25"
                min="0"
                value="0.21"
            /></label>
          </div>
        </div>
      </div>

      <!-- rendering options//////////////////////////////////////////// -->
      <div class="tab" id="tab-3" title="rendering options">
        <i class="fa-solid fa-paintbrush tab-icon"></i>
      </div>
      <div id="tab-3-content" class="hidden">
        <div class="section">
          <label
            ><span id="rendering-bg-color-span">background color</span
            ><input
              type="color"
              id="background-color-input"
              class="refresh"
              value="#FFFFFF"
          /></label>
          <label
            ><span id="rendering-line-color-span">line color</span
            ><input
              type="color"
              id="line-color-input"
              class="refresh"
              value="#A4DDED"
          /></label>
          <label
            ><span id="rendering-line-weight-span">line weight</span
            ><select id="line-thickness-select" class="refresh">
              <option value="1">x1</option>
              <option value="2">x2</option>
              <option value="3">x3</option>
              <option value="4">x4</option>
              <option value="5">x5</option>
              <option value="6">x6</option>
            </select></label
          >
          <label
            ><span id="rendering-panel-line-color-span">panel line color</span
            ><input
              type="color"
              id="panel-line-color-input"
              class="refresh"
              value="#000000"
          /></label>
          <label
            ><span id="rendering-panel-guides-color-span"
              >panel guides color</span
            ><input
              type="color"
              id="panel-guides-color-input"
              class="refresh"
              value="#ff00ff"
          /></label>
          <label
            ><span id="rendering-header-text-weight-span"
              >header text weight</span
            ><select id="header-text-weight-select" class="refresh">
              <option id="rendering-header-text-weight-option-0" value="normal">
                normal
              </option>
              <option id="rendering-header-text-weight-option-1" value="bold">
                bold
              </option>
            </select></label
          >
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="paper-draw-bg-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-bg-span">draw background</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="paper-draw-header-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-header-span">draw header</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="bleed-draw-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-bleed-span">draw bleed area</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="trim-draw-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-trim-span">draw trim area</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="safe-draw-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-safe-span">draw safe area</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="border-marks-draw-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-fraction-span">draw fraction marks</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="crop-marks-draw-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-crop-span">draw crop marks</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="panel-guides-draw-checkbox"
              class="refresh"
            />
            <span id="rendering-draw-panel-guides-span">draw panel guides</span>
          </label>
          <label class="checkbox-label">
            <input
              type="checkbox"
              id="panels-draw-checkbox"
              class="refresh"
              checked
            />
            <span id="rendering-draw-panels-span">draw panels</span>
          </label>
        </div>
      </div>

      <!-- panel grid ///////////////////////////////////////////////////// -->
      <div class="tab" id="tab-4" title="panel grid">
        <i class="fa-solid fa-border-all tab-icon"></i>
      </div>
      <div id="tab-4-content" class="hidden">
        <label
          ><span id="grid-load-preset-span">load a grid preset</span>
          <select id="grid-preset-select" class="refresh"></select
        ></label>
        <div class="import-export-buttons">
          <div
            id="open-modal-import-grid-preset-button"
            class="import-export-button"
            title="import preset from file"
          >
            <i class="fa-solid fa-file-arrow-up"></i>
          </div>
          <div
            id="open-modal-export-grid-preset-button"
            class="import-export-button"
            title="export grid to preset file"
          >
            <i class="fa-solid fa-file-arrow-down"></i>
          </div>
        </div>

        <label><span id="grid-nodes-tree-span">grid (tree view)</span></label>
        <div id="panel-tree-view" class="tree-view">
          <ul id="panel-tree-view-root" class="tree-view-root"></ul>
        </div>

        <label><span id="grid-node-selected-span">selected node</span></label>
        <div class="tree-view-selected-element-view">
          <label id="grid-nodes-tree-selected-debug"></label>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="grid-node-type-span">type</span
              ><select id="grid-nodes-tree-selected-type-select">
                <option id="grid-node-type-option-vgroup" value="vgroup">
                  vertical group
                </option>
                <option id="grid-node-type-option-hgroup" value="hgroup">
                  horizontal group
                </option>
                <option id="grid-node-type-option-panel" value="panel">
                  panel
                </option>
              </select></label
            >
            <label class="two-columns"
              ><span id="grid-node-size-span">size (%)</span
              ><input
                type="number"
                id="grid-nodes-tree-selected-size-input"
                step="1"
                min="0"
                max="100"
                value="50"
            /></label>
          </div>
          <button id="grid-nodes-tree-selected-addgroup-button">
            ADD CHILD GROUP
          </button>
          <button id="grid-nodes-tree-selected-addpanel-button">
            ADD CHILD PANEL
          </button>
          <button id="grid-nodes-tree-selected-moveup-button">MOVE UP</button>
          <button id="grid-nodes-tree-selected-movedown-button">
            MOVE DOWN
          </button>
          <button id="grid-nodes-tree-selected-remove-button">REMOVE</button>
        </div>
      </div>

      <!-- header text" /////////////////////////////////////////////////// -->
      <div class="tab" id="tab-5" title="header text">
        <i class="fa-solid fa-align-justify tab-icon"></i>
      </div>
      <div id="tab-5-content" class="hidden">
        <label
          ><span id="header-load-preset-span">load a header preset</span>
          <select id="header-preset-select" class="refresh"></select
        ></label>
        <div class="import-export-buttons">
          <div
            id="open-modal-import-header-preset-button"
            class="import-export-button"
            title="import preset from file"
          >
            <i class="fa-solid fa-file-arrow-up"></i>
          </div>
          <div
            id="open-modal-export-header-preset-button"
            class="import-export-button"
            title="export header to preset file"
          >
            <i class="fa-solid fa-file-arrow-down"></i>
          </div>
        </div>

        <label
          ><span id="header-nodes-tree-span"
            >header text (tree view)</span
          ></label
        >
        <div id="header-tree-view" class="tree-view">
          <ul id="header-tree-view-root" class="tree-view-root"></ul>
        </div>

        <label><span id="header-node-selected-span">selected node</span></label>
        <div class="tree-view-selected-element-view">
          <label id="header-nodes-tree-selected-string-label"
            ><span id="header-node-text-contents-span">text</span
            ><input type="text" id="header-nodes-tree-selected-string-input"
          /></label>
          <label id="header-nodes-tree-selected-length-label"
            ><span id="header-node-lenght-multiplier-span"
              >length (x text height)</span
            ><input
              type="number"
              id="header-nodes-tree-selected-length-input"
              min="0"
          /></label>
          <button
            id="header-nodes-tree-selected-addline-button"
            class="tree-view-button-extra-top-margin"
          >
            ADD LINE CHILD
          </button>
          <button
            id="header-nodes-tree-selected-addtext-button"
            class="tree-view-button-extra-top-margin"
          >
            ADD TEXT CHILD
          </button>
          <button id="header-nodes-tree-selected-addunderline-button">
            ADD UNDERLINE CHILD
          </button>
          <button id="header-nodes-tree-selected-addspace-button">
            ADD SPACE CHILD
          </button>
          <button id="header-nodes-tree-selected-moveup-button">MOVE UP</button>
          <button id="header-nodes-tree-selected-movedown-button">
            MOVE DOWN
          </button>
          <button id="header-nodes-tree-selected-remove-button">REMOVE</button>
        </div>
        <!-- hidden texts -->
        <div style="display: none">
          <span id="header-node-type-header-span">header</span>
          <span id="header-node-type-line-span">line</span>
          <span id="header-node-type-text-span">text</span>
          <span id="header-node-type-underline-span">underline</span>
          <span id="header-node-type-space-span">space</span>
        </div>
      </div>

      <!-- layout //////////////////////////////////////////////////////// -->
      <div class="tab" id="tab-6" title="layout (page/thumbnails)">
        <i class="fa-solid fa-grip tab-icon"></i>
      </div>
      <div id="tab-6-content" class="hidden">
        <h3 class="h3-extratop" id="layout-header">Layout options:</h3>
        <label
          ><span id="layout-page-spread-span">page spread</span
          ><select id="layout-spread-select" class="refresh">
            <option id="layout-page-spread-option-single" value="single">
              single page
            </option>
            <option id="layout-page-spread-option-double" value="double">
              double page
            </option>
          </select></label
        >
        <label
          ><span id="layout-ppi-span">ppi</span
          ><input
            type="number"
            id="ppi-input"
            class="refresh"
            step="150"
            value="300"
        /></label>
        <label
          ><span id="layout-template-type-span">template type</span
          ><select id="layout-template-select" class="refresh">
            <option id="layout-template-type-option-page" value="page">
              page template
            </option>
            <option
              id="layout-template-type-option-thumbnails"
              value="thumbnails"
            >
              thumbnails template
            </option>
          </select></label
        >
        <div id="layout-page-div">
          <h3 class="h3-extratop" id="layout-page-template-header">
            Page template options:
          </h3>
          <label
            ><span id="layout-page-paper-span">paper size</span>
            <select id="layout-page-paper-select" class="refresh">
              <option value="header" id="layout-page-paper-option-0">
                use header area size
              </option>
              <option value="a4">A4</option>
              <option value="b4">B4</option>
              <option value="us">US Letter</option>
              <option value="11x17">11x17</option>
            </select></label
          >
          <label
            ><span id="layout-page-scaling-span">scaling</span>
            <select id="layout-page-scaling-select" class="refresh">
              <option value="keep" id="layout-page-scaling-option-keep">
                keep dimensions
              </option>
              <option value="scale" id="layout-page-scaling-option-scale">
                scale to fit paper dimensions
              </option>
            </select></label
          >
        </div>
        <div id="layout-thumbnails-div" class="hidden">
          <h3 class="h3-extratop" id="layout-thumbnails-header">
            Thumbnails template options:
          </h3>
          <div class="columns-parent">
            <label class="two-columns"
              ><span id="layout-thumbnails-columns-span">columns</span
              ><input
                type="number"
                id="layout-thumbnails-columns-input"
                class="refresh"
                step="1"
                min="1"
                value="3"
            /></label>
            <label class="two-columns"
              ><span id="layout-thumbnails-rows-span">rows</span
              ><input
                type="number"
                id="layout-thumbnails-rows-input"
                class="refresh"
                step="1"
                min="1"
                value="3"
            /></label>
          </div>
          <label
            ><span id="layout-thumbnails-paper-span">paper size</span>
            <select id="layout-thumbnails-paper-select" class="refresh">
              <option value="a4">DIN A4</option>
              <option value="us">US Letter</option>
            </select></label
          >
        </div>
      </div>

      <!-- save //////////////////////////////////////////////////////// -->
      <div class="tab" id="tab-7" title="save as image">
        <i class="fa-solid fa-floppy-disk tab-icon"></i>
      </div>
      <div id="tab-7-content" class="hidden">
        <h3 class="h3-extratop" id="save-header">Save Template As Image:</h3>
        <label
          ><span id="save-format-span">file format</span
          ><select id="save-template-format-select">
            <option value="png">png</option>
            <option value="jpg">jpg</option>
            <option value="pdf">pdf</option>
            <option value="psd">psd</option>
          </select></label
        >
        <button id="save-template-button">SAVE</button>
      </div>

      <!-- info //////////////////////////////////////////////////////// -->
      <div class="tab" id="tab-8" title="tool info">
        <i class="fa-solid fa-circle-info tab-icon"></i>
      </div>
      <div id="tab-8-content" class="hidden">
        <h3 id="info-title-header">Comic Book Template Maker</h3>
        <p id="info-description-p">
          Tool to create comic book page and thumbnails templates.
        </p>
        <h3 id="info-version-header">Version:</h3>
        <p id="info-version-p">0.0.0</p>
        <p></p>
        <h3 class="h3-extratop" id="info-author-header">Made by:</h3>
        <p>Álvaro García</p>
        <p>
          <a
            href="http://www.binarynonsense.com"
            target="”_blank”"
            id="binaryLink"
            >www.binarynonsense.com</a
          >
        </p>
      </div>
    </div>

    <!-- modals template presets -->
    <div id="import-preset-modal" class="modal">
      <div class="modal-frame">
        <div class="modal-topbar">
          <div
            class="modal-close-x-button modal-close-button"
            id="import-preset-modal-close-button"
            title="cancel"
          >
            <i class="fa-solid fa-close"></i>
          </div>
        </div>
        <h3 class="h3-extratop h3-extrabottom" id="import-preset-modal-header">
          Import Preset From File:
        </h3>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="import-preset-modal-add-checkbox"
            checked
            disabled
          />
          <span id="import-preset-modal-add-span">add to presets list</span>
        </label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="import-preset-modal-apply-checkbox"
            checked
          />
          <span id="import-preset-modal-apply-span">apply when loaded</span>
        </label>
        <input type="file" id="import-preset-file-input" accept=".json" />
        <button id="import-preset-modal-choose-button">CHOOSE FILE</button>
        <button
          class="modal-close-button"
          id="import-preset-modal-cancel-button"
        >
          CANCEL
        </button>
      </div>
    </div>

    <div id="export-preset-modal" class="modal">
      <div class="modal-frame">
        <div class="modal-topbar">
          <div
            class="modal-close-x-button modal-close-button"
            id="export-preset-modal-close-button"
            title="cancel"
          >
            <i class="fa-solid fa-close"></i>
          </div>
        </div>
        <h3 class="h3-extratop" id="export-preset-modal-header">
          Export Current Settings To Preset File:
        </h3>
        <label
          ><span id="export-preset-modal-name-span">preset name</span
          ><input type="text" id="export-preset-name-input" value="comic page"
        /></label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="export-preset-dimensions-checkbox"
            checked
          />
          <span id="export-preset-modal-dimensions-span"
            >export dimensions</span
          >
        </label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="export-preset-rendering-checkbox"
            checked
          />
          <span id="export-preset-modal-rendering-span"
            >export rendering options</span
          >
        </label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="export-preset-current-grid-checkbox"
            checked
          />
          <span id="export-preset-modal-grid-span">export panel grid</span>
        </label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="export-preset-current-header-checkbox"
            checked
          />
          <span id="export-preset-modal-header-span">export header text</span>
        </label>
        <label class="checkbox-label">
          <input type="checkbox" id="export-preset-layout-checkbox" checked />
          <span id="export-preset-modal-layout-span">export layout</span>
        </label>
        <button id="export-preset-modal-export-button">EXPORT</button>
        <button
          class="modal-close-button"
          id="export-preset-modal-cancel-button"
        >
          CANCEL
        </button>
      </div>
    </div>

    <!-- modals grid presets -->
    <div id="import-grid-preset-modal" class="modal">
      <div class="modal-frame">
        <div class="modal-topbar">
          <div
            class="modal-close-x-button modal-close-button"
            id="import-grid-preset-modal-close-button"
            title="cancel"
          >
            <i class="fa-solid fa-close"></i>
          </div>
        </div>
        <h3
          class="h3-extratop h3-extrabottom"
          id="import-grid-preset-modal-header"
        >
          Import Grid Preset From File:
        </h3>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="import-grid-preset-add-checkbox"
            checked
            disabled
          />
          <span id="import-grid-preset-modal-add-span"
            >add to presets list</span
          >
        </label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="import-grid-preset-apply-checkbox"
            checked
          />
          <span id="import-grid-preset-modal-apply-span"
            >apply when loaded</span
          >
        </label>
        <input type="file" id="import-grid-preset-file-input" accept=".json" />
        <button id="import-grid-preset-modal-choose-button">CHOOSE FILE</button>
        <button
          class="modal-close-button"
          id="import-grid-preset-modal-cancel-button"
        >
          CANCEL
        </button>
      </div>
    </div>

    <div id="export-grid-preset-modal" class="modal">
      <div class="modal-frame">
        <div class="modal-topbar">
          <div
            class="modal-close-x-button modal-close-button"
            id="export-grid-preset-modal-close-button"
            title="cancel"
          >
            <i class="fa-solid fa-close"></i>
          </div>
        </div>
        <h3 class="h3-extratop" id="export-grid-preset-modal-header">
          Export Current Grid To Preset File:
        </h3>
        <label
          ><span id="export-grid-preset-modal-name-span">preset name</span
          ><input
            type="text"
            id="export-grid-preset-name-input"
            value="panel grid"
        /></label>
        <button id="export-grid-preset-modal-export-button">EXPORT</button>
        <button
          class="modal-close-button"
          id="export-grid-preset-modal-cancel-button"
        >
          CANCEL
        </button>
      </div>
    </div>

    <!-- modals header presets -->
    <div id="import-header-preset-modal" class="modal">
      <div class="modal-frame">
        <div class="modal-topbar">
          <div
            class="modal-close-x-button modal-close-button"
            id="import-header-preset-modal-close-button"
            title="cancel"
          >
            <i class="fa-solid fa-close"></i>
          </div>
        </div>
        <h3
          class="h3-extratop h3-extrabottom"
          id="import-header-preset-modal-header"
        >
          Import Header Preset From File:
        </h3>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="import-header-preset-add-checkbox"
            checked
            disabled
          />
          <span id="import-header-preset-modal-add-span"
            >add to presets list</span
          >
        </label>
        <label class="checkbox-label">
          <input
            type="checkbox"
            id="import-header-preset-apply-checkbox"
            checked
          />
          <span id="import-header-preset-modal-apply-span"
            >apply when loaded</span
          >
        </label>
        <input
          type="file"
          id="import-header-preset-file-input"
          accept=".json"
        />
        <button id="import-header-preset-modal-choose-button">
          CHOOSE FILE
        </button>
        <button
          class="modal-close-button"
          id="import-header-preset-modal-cancel-button"
        >
          CANCEL
        </button>
      </div>
    </div>

    <div id="export-header-preset-modal" class="modal">
      <div class="modal-frame">
        <div class="modal-topbar">
          <div
            class="modal-close-x-button modal-close-button"
            id="export-header-preset-modal-close-button"
            title="cancel"
          >
            <i class="fa-solid fa-close"></i>
          </div>
        </div>
        <h3 class="h3-extratop" id="export-header-preset-modal-header">
          Export Current Header To Preset File:
        </h3>
        <label
          ><span id="export-header-preset-modal-name-span">preset name</span
          ><input
            type="text"
            id="export-header-preset-name-input"
            value="header"
        /></label>
        <button id="export-header-preset-modal-export-button">EXPORT</button>
        <button
          class="modal-close-button"
          id="export-header-preset-modal-cancel-button"
        >
          CANCEL
        </button>
      </div>
    </div>

    <!-- loading -->
    <div id="loading" class="is-active">
      <div id="loading-bg"><div id="loading-spinner"></div></div>
    </div>
  </body>

  <script src="./libs/ag-psd/dist/bundle.js"></script>
  <script src="./libs/panzoom/panzoom.min.js"></script>
  <script src="./libs/blob-stream/blob-stream.js"></script>
  <script src="./libs/pdfkit/pdfkit.standalone.js"></script>
  <script src="./js/main.js" type="module"></script>
</html>
